<template>
  <div>
    <topHeader/>
    <!--  标题  -->
    <div class="real">
      <div class="real-title">
        <i class="iconfont icon-idcard"></i>
        <p>实名认证</p>
      </div>
      <!-- 主体内容-->
      <div class="real-main">
        <div class="real-main-area">
          <div class="title">
            <h3>上传身份证证件照</h3>
          </div>
          <!--  身份证正面        -->
          <div class="id-card-front">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <div class="id-card-front-img">
                <div class="id-card-front-new"><i class="iconfont icon-new"></i></div>
                <img v-if="idCardFront" :src="idCardFront" class="avatar">
                <img v-else :src="idCardFront" class="avatar">
              </div>
            </el-upload>
          </div>
          <!--   身份证背面       -->
          <div class="id-card-back">
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
              <div class="id-card-front-img">
                <img v-if="imgUrl" :src="idCardBack" class="avatar">
                <img v-else :src="idCardBack" class="avatar">
              </div>
            </el-upload>
          </div>
          <!--   底部的多种选择       -->
          <div class="id-card-shoot">
            <img :src="idCardShoot" alt="">
          </div>
        </div>
      </div>
      <!--  表单-->
      <div class="real-form">
        <el-form label-position="left" label-width="150px" :model="idCardMsg"
                 :rules="rules" ref="idCardMsg"
        >
          <el-form-item label="法人真实姓名：" prop="name">
            <el-input v-model="idCardMsg.name"></el-input>
          </el-form-item>
          <el-form-item label="法人身份证号码：" prop="idCardNumber">
            <el-input v-model="idCardMsg.idCardNumber"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="submitForm('idCardMsg')">提交上传</el-button>
          </el-form-item>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
import topHeader from "@/components/header/header";
// 身份证正面
import idCardFront from '@/assets/images/id-card-front.png'
// 身份证背面
import idCardBack from '@/assets/images/id-card-back.png'
//底部多种选择
import idCardShoot from '@/assets/images/id-card-shoot.png'
//判断身份是否合格
import judgeIdCard from "@/utils/judge-id-card";

export default {
  name: "realName",
  data() {
    let rulesIdCard = (rule, value, callback) => {
      if (!value){
        return callback("身份证号码不能为空")
      } else {
        judgeIdCard(value)
        callback();
      }

    }
    return {
      idCardFront,
      idCardBack,
      idCardShoot,
      //表单数据
      idCardMsg: {
        name: '',//名称
        idCardNumber: ''//身份证
      },
      rules: {
        name: [
          {required: true, message: '请输入法人真实姓名', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        idCardNumber: [
          {validator: rulesIdCard, trigger: 'blur'}
        ]
      },
      imgUrl:"",//上传图片的url
    }
  },
  mounted() {
    this.watermark.set("张万志")//页面添加水印，暂时写死，等与后端交互，水印要对应当前登录用户的真实姓名
  },
  components: {
    topHeader
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log("上传")
        if (valid) {
          this.$router.push({name:"Login"})
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.$message.success("上传成功")
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  },
}
</script>

<style src="./real-name.less" lang="less" scoped>

</style>
